Tutorial & code
Price List & Business Hours
Simple mobile responsive lists using the HTML module. Add background styles with the column settings.
Minimum BB plugin required: Lite Saved under: Rows
Skill level: Beginner Contributor: David Waumsley
Template Location
Video
Notes
This is a row template containing a collection of HTML modules. The backgrounds shown are added in the containing column through Beaver Builder options. The HTML code is easy to understand:
- Drag in the row template and move HTML modules or columns you want use then you can delete the template row.
- Go to the General tab to change the values (in black text). You can copy or delete lines (that start and end with <li> and </li> ) to the amount you need.
- If you want to change the text color, the divider border go to the Advanced tab and scroll to the CSS section. See the code below for the instructional comments.
For non coders:
- ul is HTML for Unordered List.
- li is HTML for List Item.
- The span tag is an inline container. We have two per list item and use it to assign CSS styles to it.
We could have added CSS styles directly in the span tags. We could have given the span tag class or ID name (selector). Instead (to keep the HTML simple) we have use something more advanced in CSS called a pseudo class to identify one span tag from the other on same line. In this case it is :first-child.
ul li span:first-child{ float: left; padding: 0 10px 0 0; }
See the Price List & Business Hours template in action.
Code
HTML
This is placed in a HTML Module:
<ul> <li><span> Cut and Finish</span><span>£37</span></li> <li><span>Blowdry</span><span>£21</span></li> <li><span>Children Under 12</span><span>£10</span></li> <li><span>Children over 12</span><span>£20</span></li> <li><span> Hair Up and Party Styling</span><span>from £35</span></li> </ul>
CSS
/* ul = unordered list. li = list item */ ul li { color: inherit; /*delete or change to a color as needed */ padding: 20px 0; /*Two values here means top and bottom padding is 20px and left and right are 0 */ list-style: none; /*this stops browser adding bullet point to the list items */ margin-left: -25px; /*this compensates for the list item indentation */ } ul li span:first-child{ float: left; /*The first span is floating left */ padding: 0 10px 0 0; /*Four values here so it is clockwise from the top: top 0 right 10px bottom 0 left 0. this is creating a space between the border line */ } ul li span:first-child + span{ float: right; /*The span that is not the first-child is floating right */ padding: 0 0 0 10px; } .fl-module-content ul li:after{ /* this selector uses a "pseudo-element" after to create a styled content area not in the page markup */ content: ''; height: 14px; display: block; /* takes up the available width of the parent element */ overflow: hidden; /* The overflow property specifies what should happen if content overflows an element's box*/ border-bottom: 1px solid #ccc; /* could change solid for dotted, dashed, double */ } /* .fl-module-content is added stop the pseudo-element adding this styling to the Beaver Builder UI*/ ------------------------------------------------------------------------------------------------------------------------/* The CSS for the AGENDA example */ ul li { list-style: none; line-height: 2.6em; font-weight: normal; color: grey; } ul li span:first-child{ float: left; width: 160px; /* change to the space need on the left*/ font-weight: bold; color: black; }
Discounts On These Two Lifetime Deals:
MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off
--------------------------------------------------------------
Can you improve this template?
We'd love it if you can so please comment and share.
For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.